<!--
::after伪元素
    - 是隔墙法的升级版
    - 给父元素添加
优缺
    - 没有增加标签，结构更简单
    - 需要照顾低版本浏览器（IE6、7）

拓展
    百度、淘宝、网易等就是使用这种方式来清除浮动的。
-->
<style>
    /* 写法是固定的，直接给父元素挂上这个类名即可，习惯命名为：clearfix */
    /* ------------------------------ */
    .clearfix {
        /* 照顾兼容性：这是IE6、7专有的属性 */
        *zoom: 1;
    }
    .clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    /* ------------------------------ */
    .one {
        float: left;
        width: 100px;
        height: 100px;
        background: red;
    }
    .two {
        float: left;
        width: 200px;
        height: 200px;
        background: orange;
    }
    .three {
        height: 300px;
        background: skyblue;
    }
</style>

<!-- 父盒子挂上类名 -->
<div class="box clearfix">
    <div class="one">浮</div>
    <div class="two">浮</div>
</div>
<div class="three">后面来的标准流块盒子</div>